<template>
	<div class="">
		<betslip-button v-if="data.needAccept" @click="onAccept">
			{{ $t('betslip.acceptOdds') }}
		</betslip-button>
		<betslip-button v-else-if="data.status === BetslipItemStatus.failed" @click="onRebet">
			{{ $t('betslip.rebet') }}
		</betslip-button>
		<betslip-input v-else :data="data" @change="onInputChange" />
	</div>
</template>

<script lang="ts" setup>
import BetslipInput from './betslip-input.vue'
import BetslipButton from './betslip-button.vue'
import { PropType, watch } from 'vue'
import { BetslipBaseType, BetslipItemStatus } from '@/types'
import { useBetslipStore } from '@/store'
import { AcceptOddsMode } from '@/enums'

const betslipStore = useBetslipStore()

const props = defineProps({
	data: {
		type: Object as PropType<BetslipBaseType>,
		required: true
	},
	odds: {
		type: [Number, String]
	}
})

const onInputChange = (val: number) => betslipStore.setAmount(props.data, val)

const onAccept = () => (props.data.needAccept = false)

const onRebet = () => {
	props.data.status = BetslipItemStatus.none
	betslipStore.removeSuccess()
}

watch(
	() => props.odds,
	(curr, prev) => {
		if (curr && prev) {
			if (+prev > +curr) {
				props.data.trend = 'down'
			} else if (+prev < +curr) {
				props.data.trend = 'up'
			}
			if (
				betslipStore.acceptOddsMode === AcceptOddsMode.None ||
				(betslipStore.acceptOddsMode === AcceptOddsMode.AcceptHigher && +prev > +curr)
			) {
				props.data.needAccept = true
			}
		}
	}
)

watch(
	() => betslipStore.acceptOddsMode,
	(val) => {
		if (
			val === AcceptOddsMode.AcceptAny ||
			(betslipStore.acceptOddsMode === AcceptOddsMode.AcceptHigher && props.data.trend === 'up')
		) {
			props.data.needAccept = false
		}
	}
)
</script>
